<template>
  <div>
    <div
      class="switch"
      @click="clickSwitch"
      :class="{
        'switch-normal': !value,
        'switch-active': value,
      }"
    >
      <div
        class="switch-status"
        :class="{
          'switch-status-normal': !value,
          'switch-status-active': value,
        }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["value", "data"],
  methods: {
    clickSwitch() {
      this.$emit("click", Boolean(!this.value), this.data);
    },
  },
};
</script>

<style scoped lang="scss">
.switch {
  $height: 22px;

  height: $height;
  border-radius: 16px;
  width: 45px;
  position: relative;
  background: $border-color;
  transition: 0.2s all linear;

  &-status {
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;

    transition: 0.3s all ease-in-out;
    &-normal {
      left: 5px;
      transform: translateX(0px);
    }
    &-active {
      transform: translateX(24px);
    }
  }
  &-normal {
    background: #c1c0cdf2;
  }
  &-active {
    background: #3ca6f1;
  }
}
</style>
